<template>
  <div class="points-management">
    <div class="page-header">
      <h1 class="page-title">积分系统管理</h1>
      <div class="header-actions">
        <el-button type="primary" @click="showRuleDialog = true">
          <i class="fas fa-plus mr-2"></i>添加积分规则
        </el-button>
        <el-button type="primary" @click="refreshData">
          <i class="fas fa-sync-alt mr-2"></i>刷新
        </el-button>
      </div>
    </div>

    <!-- 积分统计 -->
    <div class="stats-section">
      <div class="stat-card total">
        <div class="stat-icon">
          <i class="fas fa-coins"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.totalPoints }}</div>
          <div class="stat-label">总积分</div>
        </div>
      </div>
      <div class="stat-card users">
        <div class="stat-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.activeUsers }}</div>
          <div class="stat-label">活跃用户</div>
        </div>
      </div>
      <div class="stat-card today">
        <div class="stat-icon">
          <i class="fas fa-calendar-day"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.todayPoints }}</div>
          <div class="stat-label">今日获得</div>
        </div>
      </div>
      <div class="stat-card redeemed">
        <div class="stat-icon">
          <i class="fas fa-gift"></i>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.redeemedPoints }}</div>
          <div class="stat-label">已兑换</div>
        </div>
      </div>
    </div>

    <!-- 积分规则管理 -->
    <div class="rules-section">
      <div class="section-header">
        <h2 class="section-title">积分规则管理</h2>
      </div>
      
      <el-table :data="pointsRules" style="width: 100%">
        <el-table-column prop="name" label="规则名称" width="200"></el-table-column>
        <el-table-column prop="action" label="触发动作" width="150"></el-table-column>
        <el-table-column prop="points" label="积分值" width="100" align="center">
          <template #default="{ row }">
            <span class="text-green-600 font-semibold">+{{ row.points }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="limit" label="每日限制" width="100" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status === 'active' ? 'success' : 'danger'">
              {{ row.status === 'active' ? '启用' : '停用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="规则描述" min-width="200"></el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="editRule(row)">
              <i class="fas fa-edit mr-1"></i>编辑
            </el-button>
            <el-button 
              size="small" 
              :type="row.status === 'active' ? 'danger' : 'success'"
              @click="toggleRuleStatus(row)"
            >
              {{ row.status === 'active' ? '停用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 用户积分排行 -->
    <div class="ranking-section">
      <div class="section-header">
        <h2 class="section-title">用户积分排行</h2>
        <el-radio-group v-model="rankingPeriod" size="small">
          <el-radio-button label="today">今日</el-radio-button>
          <el-radio-button label="week">本周</el-radio-button>
          <el-radio-button label="month">本月</el-radio-button>
          <el-radio-button label="all">总榜</el-radio-button>
        </el-radio-group>
      </div>
      
      <div class="ranking-grid">
        <div v-for="(user, index) in userRanking" :key="user.id" class="ranking-card">
          <div class="rank-badge" :class="getRankClass(index)">
            {{ index + 1 }}
          </div>
          <div class="user-info">
            <div class="user-name">{{ user.name }}</div>
            <div class="user-points">{{ user.points }}积分</div>
          </div>
          <div class="user-stats">
            <div class="stat-item">
              <span class="label">案件数:</span>
              <span class="value">{{ user.cases }}</span>
            </div>
            <div class="stat-item">
              <span class="label">活跃度:</span>
              <span class="value">{{ user.activity }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 积分记录 -->
    <div class="records-section">
      <div class="section-header">
        <h2 class="section-title">积分记录</h2>
        <div class="search-controls">
          <el-input
            v-model="searchQuery"
            placeholder="搜索用户名或操作"
            class="search-input"
            clearable
          >
            <template #prefix>
              <i class="fas fa-search"></i>
            </template>
          </el-input>
          <el-select v-model="typeFilter" placeholder="类型" clearable>
            <el-option label="全部" value=""></el-option>
            <el-option label="获得" value="earn"></el-option>
            <el-option label="消费" value="spend"></el-option>
          </el-select>
        </div>
      </div>
      
      <el-table :data="filteredRecords" style="width: 100%">
        <el-table-column prop="userName" label="用户" width="120"></el-table-column>
        <el-table-column prop="action" label="操作" width="150"></el-table-column>
        <el-table-column prop="points" label="积分变化" width="120" align="center">
          <template #default="{ row }">
            <span :class="row.type === 'earn' ? 'text-green-600' : 'text-red-600'" class="font-semibold">
              {{ row.type === 'earn' ? '+' : '-' }}{{ row.points }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="余额" width="120" align="center">
          <template #default="{ row }">
            <span class="text-blue-600 font-semibold">{{ row.balance }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="说明" min-width="200"></el-table-column>
        <el-table-column prop="createdAt" label="时间" width="150"></el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRecords"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 案件积分计算器 -->
    <div class="calculator-section">
      <div class="section-header">
        <h2 class="section-title">案件积分计算器</h2>
      </div>
      
      <div class="calculator-content">
        <div class="calculator-form">
          <el-form :model="calculatorForm" label-width="120px">
            <el-form-item label="案件金额">
              <el-input-number 
                v-model="calculatorForm.amount" 
                :min="0" 
                :step="1000"
                controls-position="right"
                placeholder="请输入案件金额"
                style="width: 200px"
              />
              <span class="ml-2">元</span>
            </el-form-item>
            <el-form-item label="是否转介绍">
              <el-switch v-model="calculatorForm.isReferral"></el-switch>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="calculatePoints">计算积分</el-button>
              <el-button @click="resetCalculator">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <div class="calculator-result" v-if="calculatorResult">
          <el-alert
            :title="`计算结果：${calculatorResult.points}积分`"
            type="success"
            :description="calculatorResult.description"
            show-icon
            :closable="false"
          />
        </div>
      </div>
    </div>

    <!-- 电子锦旗管理 -->
    <div class="banner-section">
      <div class="section-header">
        <h2 class="section-title">电子锦旗管理</h2>
        <el-button type="primary" @click="showBannerDialog = true">
          <i class="fas fa-plus mr-2"></i>创建锦旗
        </el-button>
      </div>
      
      <div class="banner-grid">
        <div 
          v-for="banner in electronicBanners" 
          :key="banner.id"
          class="banner-card"
        >
          <div class="banner-header">
            <div class="banner-info">
              <h4>{{ banner.title }}</h4>
              <p class="banner-meta">
                <span>购买者：{{ banner.buyer }}</span>
                <span class="ml-4">受助人：{{ banner.recipient || '无' }}</span>
              </p>
            </div>
            <div class="banner-amount">
              <span class="amount">￥{{ banner.amount }}</span>
              <span class="points">+{{ banner.points }}积分</span>
            </div>
          </div>
          <div class="banner-content">
            <p>{{ banner.message }}</p>
          </div>
          <div class="banner-footer">
            <div class="banner-stats">
              <span class="date">{{ banner.createdAt }}</span>
              <el-tag v-if="banner.isCharity" type="warning" size="small">
                <i class="fas fa-heart mr-1"></i>爱心转移
              </el-tag>
            </div>
            <div class="banner-actions">
              <el-button size="small" type="primary" @click="viewBanner(banner)">
                <i class="fas fa-eye mr-1"></i>查看
              </el-button>
              <el-button size="small" type="danger" @click="deleteBanner(banner)">
                <i class="fas fa-trash mr-1"></i>删除
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加规则对话框 -->
    <el-dialog v-model="showRuleDialog" title="添加积分规则" width="600px">
      <el-form :model="newRule" :rules="ruleRules" ref="ruleForm" label-width="100px">
        <el-form-item label="规则名称" prop="name">
          <el-input v-model="newRule.name" placeholder="请输入规则名称"></el-input>
        </el-form-item>
        <el-form-item label="触发动作" prop="action">
          <el-select v-model="newRule.action" placeholder="选择触发动作">
            <el-option label="登录" value="login"></el-option>
            <el-option label="完成案件" value="complete_case"></el-option>
            <el-option label="发布案例" value="publish_case"></el-option>
            <el-option label="获得好评" value="good_review"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="积分值" prop="points">
          <el-input-number 
            v-model="newRule.points" 
            :min="1" 
            :max="1000"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="每日限制" prop="limit">
          <el-input-number 
            v-model="newRule.limit" 
            :min="0" 
            :max="100"
            controls-position="right"
            placeholder="0表示无限制"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="规则描述" prop="description">
          <el-input 
            v-model="newRule.description" 
            type="textarea" 
            rows="3"
            placeholder="请输入规则描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showRuleDialog = false">取消</el-button>
          <el-button type="primary" @click="handleAddRule">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'

export default {
  name: 'PointsManagement',
  setup() {
    const searchQuery = ref('')
    const typeFilter = ref('')
    const rankingPeriod = ref('all')
    const currentPage = ref(1)
    const pageSize = ref(20)
    const showRuleDialog = ref(false)
    const showBannerDialog = ref(false)
    const calculatorForm = reactive({
      amount: 0,
      isReferral: false
    })
    const calculatorResult = ref(null)
    
    const stats = reactive({
      totalPoints: 186580,
      activeUsers: 2156,
      todayPoints: 4280,
      redeemedPoints: 67890
    })
    
    const pointsRules = ref([
      {
        id: 1,
        name: '交通事故咨询服务',
        action: '咨询服务',
        points: 15,
        limit: 10,
        status: 'active',
        description: '律师提供交通事故咨询服务获得积分，消费客户积分'
      },
      {
        id: 2,
        name: '案件办结奖励（按金额）',
        action: '案件完成',
        points: 0, // 动态计算
        limit: 0,
        status: 'active',
        description: '根据案件金额给予积分：10万以下50积分，10-50万100积分，50万以上200积分'
      },
      {
        id: 3,
        name: '转介绍加倍奖励',
        action: '转介绍',
        points: 0, // 基于原积分加倍
        limit: 0,
        status: 'active',
        description: '转介绍成功案件，在原积分基础上加倍奖励'
      },
      {
        id: 4,
        name: '发布交通事故案例',
        action: '案例发布',
        points: 45,
        limit: 5,
        status: 'active',
        description: '发布交通事故案例到案例库获得积分'
      },
      {
        id: 5,
        name: '电子锦旗购买',
        action: '锦旗购买',
        points: 40, // 200元付费获得40积分
        limit: 0,
        status: 'active',
        description: '购买电子锦旗200元获得40积分'
      },
      {
        id: 6,
        name: '伤残鉴定完成',
        action: '鉴定完成',
        points: 60,
        limit: 0,
        status: 'active',
        description: '完成伤残等级鉴定获得积分'
      },
      {
        id: 7,
        name: '保险理赔成功',
        action: '理赔成功',
        points: 100,
        limit: 0,
        status: 'active',
        description: '成功处理保险理赔获得积分'
      }
    ])
    
    const userRanking = ref([
      { id: 1, name: '张律师', points: 2890, cases: 45, activity: 95 },
      { id: 2, name: '李律师', points: 2654, cases: 42, activity: 88 },
      { id: 3, name: '王律师', points: 2341, cases: 38, activity: 92 },
      { id: 4, name: '赵律师', points: 2156, cases: 35, activity: 85 },
      { id: 5, name: '陈律师', points: 1987, cases: 32, activity: 90 }
    ])
    
    const pointsRecords = ref([
      {
        id: 1,
        userName: '张律师',
        action: '每日登录',
        type: 'earn',
        points: 10,
        balance: 2890,
        description: '每日首次登录奖励',
        createdAt: '2024-01-22 09:30'
      },
      {
        id: 2,
        userName: '李律师',
        action: '完成案件',
        type: 'earn',
        points: 50,
        balance: 2654,
        description: '完成合同纠纷案件',
        createdAt: '2024-01-22 14:20'
      },
      {
        id: 3,
        userName: '王律师',
        action: '兑换奖品',
        type: 'spend',
        points: 100,
        balance: 2341,
        description: '兑换咖啡券',
        createdAt: '2024-01-22 16:45'
      }
    ])
    
    // 电子锦旗数据
    const electronicBanners = ref([
      {
        id: 1,
        title: '感谢张律师专业服务',
        buyer: '李先生',
        recipient: null,
        amount: 200,
        points: 40,
        message: '张律师在我的交通事故案件中表现非常专业，帮我争取到了合理的赔偿，非常感谢！',
        createdAt: '2024-02-15',
        isCharity: false
      },
      {
        id: 2,
        title: '爱心锦旗 - 帮助困难家庭',
        buyer: '王女士',
        recipient: '张大爷',
        amount: 200,
        points: 40,
        message: '希望这份心意能帮助到需要帮助的人，传递温暖和关爱。',
        createdAt: '2024-02-14',
        isCharity: true
      },
      {
        id: 3,
        title: '专业交通事故处理',
        buyer: '陈先生',
        recipient: null,
        amount: 200,
        points: 40,
        message: '律师团队处理我的案件非常用心，从伤残鉴定到理赔都很专业。',
        createdAt: '2024-02-13',
        isCharity: false
      }
    ])
    
    const newRule = reactive({
      name: '',
      action: '',
      points: 10,
      limit: 0,
      description: ''
    })
    
    const ruleRules = {
      name: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
      action: [{ required: true, message: '请选择触发动作', trigger: 'change' }],
      points: [{ required: true, message: '请输入积分值', trigger: 'blur' }],
      description: [{ required: true, message: '请输入规则描述', trigger: 'blur' }]
    }
    
    const filteredRecords = computed(() => {
      return pointsRecords.value.filter(record => {
        const matchesSearch = !searchQuery.value || 
          record.userName.includes(searchQuery.value) ||
          record.action.includes(searchQuery.value)
        
        const matchesType = !typeFilter.value || record.type === typeFilter.value
        
        return matchesSearch && matchesType
      })
    })
    
    const totalRecords = computed(() => filteredRecords.value.length)
    
    const getRankClass = (index) => {
      if (index === 0) return 'gold'
      if (index === 1) return 'silver'
      if (index === 2) return 'bronze'
      return 'normal'
    }
    
    const handleSizeChange = (size) => {
      pageSize.value = size
      currentPage.value = 1
    }
    
    const handleCurrentChange = (page) => {
      currentPage.value = page
    }
    
    const refreshData = () => {
      alert('数据已刷新')
    }
    
    const editRule = (rule) => {
      alert(`编辑规则: ${rule.name}`)
    }
    
    const toggleRuleStatus = (rule) => {
      rule.status = rule.status === 'active' ? 'inactive' : 'active'
      alert(`规则状态已更新`)
    }
    
    const handleAddRule = () => {
      alert('添加积分规则功能开发中...')
      showRuleDialog.value = false
    }
    
    // 案件积分计算
    const calculatePoints = () => {
      const amount = calculatorForm.amount
      let basePoints = 0
      let description = ''
      
      if (amount < 100000) {
        basePoints = 50
        description = '案件金额10万以下，基础积分50'
      } else if (amount < 500000) {
        basePoints = 100
        description = '案件金额10-50万，基础积分100'
      } else {
        basePoints = 200
        description = '案件金额50万以上，基础积分200'
      }
      
      let finalPoints = basePoints
      if (calculatorForm.isReferral) {
        finalPoints = basePoints * 2
        description += '，转介绍案件加倍奖励'
      }
      
      calculatorResult.value = {
        points: finalPoints,
        description: description
      }
    }
    
    const resetCalculator = () => {
      calculatorForm.amount = 0
      calculatorForm.isReferral = false
      calculatorResult.value = null
    }
    
    // 电子锦旗管理
    const viewBanner = (banner) => {
      ElMessage.info(`查看锦旗：${banner.title}`)
    }
    
    const deleteBanner = (banner) => {
      ElMessageBox.confirm(
        `确定要删除锦旗"${banner.title}"吗？`,
        '删除确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        const index = electronicBanners.value.indexOf(banner)
        if (index > -1) {
          electronicBanners.value.splice(index, 1)
          ElMessage.success('删除成功')
        }
      }).catch(() => {
        ElMessage.info('已取消删除')
      })
    }
    
    return {
      searchQuery,
      typeFilter,
      rankingPeriod,
      currentPage,
      pageSize,
      showRuleDialog,
      showBannerDialog,
      calculatorForm,
      calculatorResult,
      stats,
      pointsRules,
      userRanking,
      pointsRecords,
      electronicBanners,
      newRule,
      ruleRules,
      filteredRecords,
      totalRecords,
      getRankClass,
      handleSizeChange,
      handleCurrentChange,
      refreshData,
      editRule,
      toggleRuleStatus,
      handleAddRule,
      calculatePoints,
      resetCalculator,
      viewBanner,
      deleteBanner
    }
  }
}
</script>

<style scoped>
.points-management {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 4px solid #e5e7eb;
}

.stat-card.total {
  border-left-color: #f59e0b;
}

.stat-card.users {
  border-left-color: #3b82f6;
}

.stat-card.today {
  border-left-color: #10b981;
}

.stat-card.redeemed {
  border-left-color: #8b5cf6;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #6b7280;
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

.rules-section,
.ranking-section,
.records-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.ranking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.ranking-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.rank-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
  color: white;
}

.rank-badge.gold {
  background: linear-gradient(135deg, #ffd700, #ffed4a);
}

.rank-badge.silver {
  background: linear-gradient(135deg, #c0c0c0, #e2e8f0);
}

.rank-badge.bronze {
  background: linear-gradient(135deg, #cd7f32, #d69e2e);
}

.rank-badge.normal {
  background: #6b7280;
}

.user-info {
  flex: 1;
}

.user-name {
  font-size: 16px;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 4px;
}

.user-points {
  font-size: 18px;
  color: #f59e0b;
  font-weight: bold;
}

.user-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-item {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}

.stat-item .label {
  font-weight: 500;
}

.stat-item .value {
  color: #1f2937;
  font-weight: bold;
}

.search-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-input {
  width: 200px;
}

.pagination-section {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 计算器样式 */
.calculator-section,
.banner-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.calculator-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.calculator-form {
  background: #f9fafb;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.calculator-result {
  background: #f0f9ff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #bfdbfe;
}

/* 电子锦旗样式 */
.banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.banner-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.banner-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6);
}

.banner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.banner-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.banner-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: bold;
  color: #1f2937;
}

.banner-meta {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

.banner-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.amount {
  font-size: 18px;
  font-weight: bold;
  color: #ef4444;
}

.points {
  font-size: 14px;
  color: #f59e0b;
  font-weight: 500;
}

.banner-content {
  margin-bottom: 16px;
}

.banner-content p {
  margin: 0;
  color: #374151;
  line-height: 1.6;
  font-size: 14px;
  background: #f9fafb;
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid #f59e0b;
}

.banner-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner-stats {
  display: flex;
  align-items: center;
  gap: 12px;
}

.date {
  font-size: 12px;
  color: #9ca3af;
}

.banner-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 768px) {
  .calculator-content {
    grid-template-columns: 1fr;
  }
  
  .banner-grid {
    grid-template-columns: 1fr;
  }
  
  .banner-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .banner-amount {
    align-items: flex-start;
  }
}
</style> 